<template>
    <Card :top="'5px'" :left="'5px'" @dragEnteredRange="handleDragEnteredRange"></Card>
    <div class="main-box">
        <h3 style="text-align: center">购买服务器</h3>
        <div class="block">
            <div class="title">基本属性</div>
            <el-form class="form" ref="baseFormRef" :model="baseForm">
                <el-form-item label="付费类型" prop="type">
                    <el-radio-group v-model="baseForm.type">
                        <el-radio-button label="1">包年包月</el-radio-button>
                        <el-radio-button label="2">按量付费</el-radio-button>
                        <el-radio-button label="3">抢占式实例</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="地域" prop="area">
                    <el-input v-model="baseForm.area" placeholder="请输入地域" style="width: 250px;"/>
                </el-form-item>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="网络" prop="network">
                            <el-select v-model="baseForm.network" placeholder="请选择网络">
                                <el-option label="默认专有网络" :value="1"/>
                                <el-option label="其他网络" :value="2"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="可用区">
                            <el-select v-model="baseForm.availableArea" placeholder="请选择可用区">
                                <el-option label="默认可用区" :value="1"/>
                                <el-option label="其他可用区" :value="2"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="block">
            <div class="title">实例</div>
            <el-form class="form" :model="queryParams" :inline="true">
                <el-form-item label="CPU数">
                    <el-select v-model="queryParams.cpu" placeholder="请选择CPU数" clearable style="width: 130px;">
                        <el-option v-for="item in cpuList" :key="item.value" :label="item.label"
                                   :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="架构">
                    <el-select v-model="queryParams.architecture" placeholder="请选择架构类型" clearable
                               style="width: 180px;">
                        <el-option v-for="item in architectureList" :key="item.value" :label="item.label"
                                   :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-table style="margin-bottom: 20px" v-loading="loading" :data="exampleList" height="360"
                      highlight-current-row
                      @current-change="handleCurrentChange">
                <el-table-column prop="specification" label="规格" align="center"></el-table-column>
                <el-table-column prop="cpu" label="CPU数量" align="center" sortable></el-table-column>
                <el-table-column prop="memory" label="内存(GIB)" align="center" sortable></el-table-column>
                <el-table-column prop="architecture" label="架构-分类" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.architecture == 1" type="success">X86 计算-本地 SSD</el-tag>
                        <el-tag v-if="scope.row.architecture == 2" type="danger">ARM计算-大数据型</el-tag>
                        <el-tag v-if="scope.row.architecture == 3" type="info">GPU云服务器-共享型</el-tag>
                        <el-tag v-if="scope.row.architecture == 4" type="warning">弹性裸金属服务器-内存型</el-tag>
                        <el-tag v-if="scope.row.architecture == 5" type="danger">X86 计算-高主频型</el-tag>
                        <el-tag v-if="scope.row.architecture == 6" type="success">X86 计算-通用型</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="processorType" label="处理器" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.processorType == 1" type="success">Intel</el-tag>
                        <el-tag v-if="scope.row.processorType == 2" type="danger">AMD</el-tag>
                    </template>
                </el-table-column>
                <el-table-column width="120" fixed="right" label="参考价格" align="center" sortable
                                 row-class-name="text-color">
                    <template #default="scope">
                        <span style="color: #fd7c11">{{ scope.row.price }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <pagination style="margin-right: 20px"
                        v-if="count > 0" :total="count" v-model:page="queryParams.pageNum"
                        v-model:limit="queryParams.pageSize"
                        @pagination="getList"/>
            <div class="example-footer">
                已选实例: {{ architectureList[example.architecture].label }} / {{ example.specification }}
                <el-row>
                    <el-col :span="4">
                        调整参数:
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="CPU数" prop="name">
                            <el-input-number :min="1" v-model="example.cpu" :step="example.cpu > 1 ? example.cpu : 1"
                                             :max="8" @change="changePrice"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="内存大小" prop="name">
                            <el-input-number :min="2" v-model="example.memory" :step="example.memory"
                                             :max="32" @change="changePrice"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="block">
            <div class="title">镜像</div>
            <el-form class="form" ref="imageFormRef" :model="imageForm">
                <el-form-item label="镜像名称" prop="name">
                    <el-input v-model="imageForm.name" placeholder="请输入镜像名称" style="width: 250px;"/>
                </el-form-item>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="镜像版本" prop="imageVersion">
                            <el-select v-model="imageForm.imageVersion" placeholder="请选择镜像版本">
                                <el-option label="1.0.0" value="1.0.0"/>
                                <el-option label="2.0.0" value="2.0.0"/>
                                <el-option label="2.0.0" value="3.0.0"/>
                                <el-option label="2.0.0" value="4.0.0"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="是否安全加固" prop="isSecurity">
                            <el-radio-group v-model="imageForm.isSecurity">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="2">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="block">
            <div class="title">存储</div>
            <h3 style="margin-left: 10px">系统盘</h3>
            <el-form class="form" ref="storageSYSFormRef" :model="storageSYSForm">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="储存类型" prop="type">
                            <el-select v-model="storageSYSForm.type" placeholder="请选择储存类型">
                                <el-option label="ESSD云盘" :value="1"/>
                                <el-option label="高效云盘" :value="2"/>
                                <el-option label="SSD云盘" :value="3"/>
                                <el-option label="ESSDAutoPL" :value="4"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="储存容量(GB)" prop="capacity">
                            <el-input-number v-model="storageSYSForm.capacity" type="number"
                                             placeholder="容量" style="width: 150px"
                                             :min="60" :step="10" :max="256" @change="changePrice"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row>
                <el-col :span="3">
                    <span style="margin-left: 10px;font-weight: bold">数据盘</span>
                </el-col>
                <el-col :span="6">
                    <el-radio-group v-model="isData">
                        <el-radio :label="1" @change="changePrice">有</el-radio>
                        <el-radio :label="0" @change="changePrice">无</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-form v-show="isData" class="form" ref="storageDataFormRef" :model="storageDataForm">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="储存类型" prop="type">
                            <el-select v-model="storageDataForm.type" placeholder="请选择储存类型">
                                <el-option label="ESSD云盘" :value="1"/>
                                <el-option label="高效云盘" :value="2"/>
                                <el-option label="SSD云盘" :value="3"/>
                                <el-option label="ESSDAutoPL" :value="4"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="储存容量(GB)" prop="capacity">
                            <el-input-number v-model="storageDataForm.capacity" type="number"
                                             placeholder="容量" style="width: 150px"
                                             :min="20" :step="8" :max="256" @change="changePrice"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="block">
            <div class="title">带宽和安全组</div>
            <el-form class="form" ref="bandwidthGroupsFormRef">
                <el-form-item label="虚拟网络IP" prop="ip">
                    <el-input v-model="bandwidthGroupsForm.ip" placeholder="自动分配" disabled
                              style="width: 120px"/>
                </el-form-item>
                <el-form-item label="带宽计费模式" prop="billingMode">
                    <el-radio-group v-model="bandwidthGroupsForm.billingMode">
                        <el-radio-button label="1">按固定带宽</el-radio-button>
                        <el-radio-button label="2">按使用流量</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="带宽值(M)" prop="bandwidth">
                    <el-input-number v-model="bandwidthGroupsForm.bandwidth"
                                     @change="changePrice" :min="1" :max="10"
                                     :step="bandwidthGroupsForm.bandwidth > 1 ? 2 : 1"
                                     type="number" style="width: 160px"/>
                </el-form-item>
                <el-form-item label="安全组名称" prop="groupingName">
                    <el-input v-model="bandwidthGroupsForm.groupingName"
                              placeholder="请输入安全组名称" style="width: 300px"/>
                </el-form-item>
                <el-form-item label="安全组类型" prop="groupingType">
                    <el-radio-group v-model="bandwidthGroupsForm.groupingType">
                        <el-radio-button label="1" @change="changePrice">普通</el-radio-button>
                        <el-radio-button label="2" @change="changePrice">企业</el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <div class="block">
            <div class="title">管理设置</div>
            <el-form class="form" ref="managementFormRef">
                <el-form-item label="登录名" prop="name">
                    <el-input v-model="managementForm.name" placeholder="请输入登录名" style="width: 250px;"/>
                </el-form-item>
                <el-form-item label="密码" prop="passwd">
                    <el-input v-model="managementForm.passwd" placeholder="请输入密码" style="width: 250px;"/>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="info-box">
        <el-row>
            <el-col :span="12">
                <span>购买实例数量</span>
            </el-col>
            <el-col :span="12">
                <el-input-number :min="1" v-model="baseForm.number"
                                 @change="changePrice"></el-input-number>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <span>购买时长</span>
            </el-col>
            <el-col :span="12">
                <el-select v-model="baseForm.duration" placeholder="请选择购买时长"
                           @change="changePrice()">
                    <el-option label="1个月" :value="1"/>
                    <el-option label="2个月" :value="2"/>
                    <el-option label="3个月" :value="3"/>
                    <el-option label="4个月" :value="4"/>
                    <el-option label="6个月" :value="6"/>
                    <el-option label="8个月" :value="8"/>
                    <el-option label="10个月" :value="10"/>
                    <el-option label="12个月" :value="12"/>
                </el-select>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <span>自动续费</span>
            </el-col>
            <el-col :span="12">
                <el-radio-group v-model="baseForm.isRenewal">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-col>
        </el-row>
        <div class="configuration-box">
            <div style="font-weight: bold; font-size: 24px;position: sticky;top: 0;
                right: 0; left: 0;background: #FFFFFF;z-index: 10">配置概要
            </div>
            <el-row>
                <el-col :span="12">
                    <span style="font-weight: bold">付费类型</span>
                </el-col>
                <el-col :span="12">
                    <span v-if="baseForm.type == 1">包年包月</span>
                    <span v-else-if="baseForm.type == 2">按量付费</span>
                    <span v-else-if="baseForm.type == 3">抢占式实例</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span style="font-weight: bold">地域</span>
                </el-col>
                <el-col :span="12">
                    <span>{{ baseForm.area }}</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span style="font-weight: bold">可用区</span>
                </el-col>
                <el-col :span="12">
                    <span v-if="baseForm.availableArea == 1">默认可用区</span>
                    <span v-if="baseForm.availableArea == 2">其他可用区</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span style="font-weight: bold">网络类型</span>
                </el-col>
                <el-col :span="12">
                    <span v-if="baseForm.network == 1">默认专有网络</span>
                    <span v-if="baseForm.network == 2">其他网络</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span style="font-weight: bold">实例规格</span>
                </el-col>
                <el-col :span="12">
                    <span> {{ architectureList[example.architecture].label }} / {{ example.specification }}
                        ({{ example.cpu }}vCPU {{ example.memory }}GiB)</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span style="font-weight: bold">镜像</span>
                </el-col>
                <el-col :span="12">
                    <span>{{ imageForm.name }}-{{ imageForm.imageVersion }} (
                        安全-<span v-if="imageForm.isSecurity == 1">是</span>
                        <span v-else>否</span>
                        )</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span style="font-weight: bold">系统盘</span>
                </el-col>
                <el-col :span="12">
                    <span>
                        <span v-if="storageSYSForm.type == 1">ESSD云盘</span>
                        <span v-else-if="storageSYSForm.type == 2">高效云盘</span>
                        <span v-else-if="storageSYSForm.type == 3">SSD云盘</span>
                        <span v-else-if="storageSYSForm.type == 4">ESSDAutoPL</span>
                        -{{ storageSYSForm.capacity }}GiB
                    </span>
                </el-col>
            </el-row>
            <el-row v-show="isData">
                <el-col :span="12">
                    <span style="font-weight: bold">数据盘</span>
                </el-col>
                <el-col :span="12">
                    <span>
                        <span v-if="storageDataForm.type == 1">ESSD云盘</span>
                        <span v-else-if="storageDataForm.type == 2">高效云盘</span>
                        <span v-else-if="storageDataForm.type == 3">SSD云盘</span>
                        <span v-else-if="storageDataForm.type == 4">ESSDAutoPL</span>
                        -{{ storageDataForm.capacity }}GiB
                    </span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span style="font-weight: bold">公网带宽</span>
                </el-col>
                <el-col :span="12">
                    <span>按固定带宽 {{ bandwidthGroupsForm.bandwidth }} Mbps</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span style="font-weight: bold">带宽计费模式</span>
                </el-col>
                <el-col :span="12">
                    <span v-if="bandwidthGroupsForm.billingMode == 1">按固定带宽</span>
                    <span v-if="bandwidthGroupsForm.billingMode == 2">按使用流量</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span style="font-weight: bold">安全组类型</span>
                </el-col>
                <el-col :span="12">
                    <span v-if="bandwidthGroupsForm.groupingType == 1">普通</span>
                    <span v-if="bandwidthGroupsForm.groupingType == 2">企业</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span style="font-weight: bold">安全组</span>
                </el-col>
                <el-col :span="12">
                    <span>{{ bandwidthGroupsForm.groupingName }}</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span style="font-weight: bold">登录凭证</span>
                </el-col>
                <el-col :span="12">
                    <span>{{ managementForm.name }} -- {{ managementForm.passwd }}</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <span style="font-weight: bold">实例名称</span>
                </el-col>
                <el-col :span="12">
                    <span>VM-20230521</span>
                </el-col>
            </el-row>
        </div>
        <div class="price-box">
            <div ref="containerRef" class="item">将有奖卡片球拖入此，进行价格抵消</div>
            <div class="item">
                <div>配置价格</div>
                <div style="margin-top: 10px;font-size: 28px;color: #b21b1b">{{ baseForm.price }}</div>
            </div>
        </div>
        <div style="text-align: center; margin-top: 20px">
            <el-button type="danger" @click="placeOrder" :disabled="isInsert">确认下单</el-button>
            <el-button type="warning" @click="returnHome">返回首页</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">

import {onMounted, reactive, ref, toRefs} from "vue";
import {FormInstance} from "element-plus";
import {Example, ExampleQuery} from "@/api/example/types";
import router from "@/router";
import {BaseForm} from "@/api/base/types";
import {ImageForm} from "@/api/image/types";
import {StorageForm} from "@/api/storage/types";
import {BandwidthGroupsForm} from "@/api/bandwidthgroups/types";
import {ManagementForm} from "@/api/management/types";
import {CorrelationForm} from "@/api/correlation/types";
import {CardForm} from "@/api/card/types";
import {addExample, getExampleList} from "@/api/example";
import {insertBase} from "@/api/base";
import {insertImage} from "@/api/image";
import {insertStorage} from "@/api/storage";
import {insertGroups} from "@/api/bandwidthgroups";
import {insertManagement} from "@/api/management";
import {insertCorrelation} from "@/api/correlation";
import {notifySuccess} from "@/utils/modal";
import {updateCard} from "@/api/card";
import useStore from "@/store";

const baseFormRef = ref<FormInstance>();
const imageFormRef = ref<FormInstance>();
const storageSYSFormRef = ref<FormInstance>();
const storageDataFormRef = ref<FormInstance>();
const bandwidthGroupsFormRef = ref<FormInstance>();
const managementFormRef = ref<FormInstance>();
const containerRef = ref<HTMLElement | null>(null);

const{user} = useStore();

const data = reactive({
    count: 0,
    loading: false,
    queryParams: {
        pageNum: 1,
        pageSize: 10,
    } as ExampleQuery,
    baseForm: {
        type: 1,
        area: "华东1 (杭州)",
        network: 1,
        availableArea: 1,
        number: 1,
        duration: 1,
        isRenewal: 0,
        price: 0,
    } as BaseForm,
    cpuList: [
        {
            value: 1,
            label: "1",
        },
        {
            value: 2,
            label: "2",
        },
        {
            value: 4,
            label: "4",
        },
        {
            value: 8,
            label: "8",
        },
        {
            value: 12,
            label: "12",
        },
    ],
    architectureList: [
        {
            value: 1,
            label: "X86 计算-本地 SSD",
        },
        {
            value: 2,
            label: "ARM 计算-大数据型",
        },
        {
            value: 3,
            label: "GPU云服务器-共享型",
        },
        {
            value: 4,
            label: "弹性裸金属服务器-内存型",
        },
        {
            value: 5,
            label: "X86 计算-高主频型",
        },
        {
            value: 6,
            label: "X86 计算-通用型",
        },
    ],
    example: {
        specification: "ecs.g7.large",
        cpu: 2,
        memory: 8,
        architecture: 1,
        processorType: 1,
        price: 0
    } as Example,
    exampleList: [] as Example[],
    imageForm: {
        name: "Linux",
        imageVersion: "1.0.0",
        isSecurity: 2
    } as ImageForm,
    storageSYSForm: {
        type: 1,
        discType: 1,
        capacity: 60
    } as StorageForm,
    isData: 0,
    storageDataForm: {
        type: 1,
        discType: 2,
        capacity: 20
    } as StorageForm,
    bandwidthGroupsForm: {
        billingMode: 1,
        bandwidth: 1,
        groupingType: 1,
        groupingName: "默认安全组"
    } as BandwidthGroupsForm,
    managementForm: {
        name: "root",
        passwd: "123456"
    } as ManagementForm,
    correlationForm: {} as CorrelationForm,
    isInsert: false,
    price: 0,
    tmp4: 0,
    tmp5: 0,
    cardForm: {
        id: 0,
        price: 0
    } as CardForm
});

const {
    count,
    loading,
    queryParams,
    baseForm,
    cpuList,
    architectureList,
    example,
    exampleList,
    imageForm,
    storageSYSForm,
    isData,
    storageDataForm,
    bandwidthGroupsForm,
    managementForm,
    correlationForm,
    isInsert,
    tmp4,
    tmp5,
    cardForm,
} = toRefs(data);

const tmp4Math = (num: number) => {
    // cpu占用价格
    switch (num) {
        case 1:
            return 10;
        case 2:
            return 40;
        case 4:
            return 200;
        case 8:
            return 1000;
        default:
            return 0
    }
}
const tmp5Math = (num: number) => {
    // 内存占用价格
    switch (num) {
        case 2:
            return 20;
        case 4:
            return 120;
        case 8:
            return 400;
        case 16:
            return 800;
        case 32:
            return 2000;
        default:
            return 0
    }
}
const changePrice = () => {
    // 带宽 价格
    let tmp = 20;
    if (bandwidthGroupsForm.value.groupingType == 2) {
        // 安全模式带宽价格 * 1.5
        tmp = 20 * 1.5;
    }
    let tmpPrice = baseForm.value.number * baseForm.value.duration *
        (example.value.price + (bandwidthGroupsForm.value.bandwidth - 1) * tmp +
            tmp4Math(example.value.cpu) + tmp5Math(example.value.memory)
            - tmp4Math(tmp4.value) - tmp5Math(tmp5.value));
    if (isData.value) {
        baseForm.value.price = tmpPrice + storageDataForm.value.capacity +
            storageSYSForm.value.capacity - 60;
    } else {
        baseForm.value.price = tmpPrice + storageSYSForm.value.capacity - 60;
    }
}

const handleCurrentChange = (selection: Example) => {
    baseForm.value.price = selection.price;
    tmp4.value = selection.cpu;
    tmp5.value = selection.memory;
    example.value = selection;
    changePrice();
};

const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};

const handleBase = (data: BaseForm) => {
    insertBase(data).then(({data}) => {
        if (data.flag) {
            console.log(data);
            correlationForm.value.baseId = data.data;
        }
    });
}

const handelExample = (data: Example) => {
    example.value.id = undefined;
    addExample(data).then(({data}) => {
        if (data.flag) {
            example.value.id = data.data;
        }
    })
}

const handleImage = (data: ImageForm) => {
    insertImage(data).then(({data}) => {
        if (data.flag) {
            correlationForm.value.imageId = data.data;
        }
    });
}

const handleStorage = async (data: StorageForm, data2: StorageForm) => {
    await insertStorage(data).then(({data}) => {
        if (data.flag) {
            correlationForm.value.storageIds = data.data.toString();
        }
    });
    if (isData.value) {
        await insertStorage(data2).then(({data}) => {
            if (data.flag) {
                correlationForm.value.storageIds += ',' + data.data.toString();
            }
        });
    }
}

const handleBandwidthGroups = (data: BandwidthGroupsForm) => {
    insertGroups(data).then(({data}) => {
        if (data.flag) {
            correlationForm.value.bandwidthGroupsId = data.data;
        }
    });
}

const handleManagement = (data: ManagementForm) => {
    insertManagement(data).then(({data}) => {
        if (data.flag) {
            correlationForm.value.managementId = data.data;
        }
    });
}

const handelCorrelation = async () => {
    await pause(2000);
    correlationForm.value.exampleId = example.value.id;
    insertCorrelation(correlationForm.value).then(({data}) => {
        if (data.flag) {
            notifySuccess(data.msg);
        }
    });
}

function pause(delay: number) {
    return new Promise((resolve) => {
        setTimeout(resolve, delay);
    });
}

const inserts = (): boolean => {
    isInsert.value = true;
    updateCardPrice(cardForm.value);
    handelExample(example.value);
    handleBase(baseForm.value);
    handleImage(imageForm.value);
    handleStorage(storageSYSForm.value, storageDataForm.value);
    handleBandwidthGroups(bandwidthGroupsForm.value);
    handleManagement(managementForm.value);
    return true;
}

/**
 * 下单
 */
const placeOrder = () => {
    if (inserts()) {
        handelCorrelation();
    }
}

const getList = () => {
    loading.value = true;
    getExampleList(queryParams.value).then(({data}) => {
        console.log(data.rows);
        example.value = data.rows[0];
        baseForm.value.price = data.rows[0].price;
        exampleList.value = data.rows;
        count.value = data.total;
        loading.value = false;
    })
}

const returnHome = () => {
    router.push({path: "/"});
}

const updateCardPrice = (card: CardForm) => {
    updateCard(card).then(({data}) => {
        if (data.flag) {
          user.setCardList();
        }
    })
}

/**
 * 拖动价格改变
 */
const handleDragEnteredRange = (x: number, y: number, card: CardForm) => {
    const container = containerRef.value;
    console.log("container", container)
    if (container) {
        const containerRect = container.getBoundingClientRect();
        if (x >= containerRect.left && x <= containerRect.right &&
            y >= containerRect.top && y <= containerRect.bottom) {
            if (baseForm.value.price >= card.price) {
                baseForm.value.price -= card.price;
                card.price = 0;
            } else {
                card.price -= baseForm.value.price;
                baseForm.value.price = 0;
            }
            cardForm.value = card;
            user.cardList.forEach((item) => {
                if (item.id == card.id) {
                    item.price = card.price;
                    return;
                }
            });
        }
    }
}

onMounted(() => {
    getList();
    handleCurrentChange(example.value);
})

</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";

.main-box {
  width: 70%;
  padding-bottom: 40px;
}

.block {
  margin: 20px auto;
  width: 90%;
  border: rgba(250, 120, 20, .3) solid 1px;
  border-radius: 5px;
  transition: 0.5s;

  &:hover {
    box-shadow: 0 0 10px rgba(250, 120, 20, .5);
  }

  .title {
    @include flex;
    height: 2rem;
    border-bottom: rgba(250, 120, 20, .3) solid 1px;
  }

  .form {
    margin: 20px;
  }

  .example-footer {
    margin: 10px auto;
    text-align: center;
    line-height: 1.8;
    border-radius: 10px;
    background: rgba(250, 120, 20, .8);
    width: 90%;
    padding: 0 20px;
  }
}

.info-box {
  position: fixed;
  top: 5vh;
  right: 20px;
  width: 30%;
  height: 90vh;
  border: rgba(250, 120, 20, .3) solid 1px;
  border-radius: 5px;
  padding: 20px 10px;
  transition: 0.5s;

  &:hover {
    box-shadow: 0 0 10px rgba(250, 120, 20, .5);
  }

  .el-row {
    margin-bottom: 20px;

    &:hover {
      color: rgba(250, 120, 20, .5);
    }
  }

  .configuration-box {
    margin-top: 40px;
    padding: 0 10px 10px;
    height: 50%;
    overflow: auto;

    .el-row {
      margin: 10px;
    }

    span {
      font-size: 15px;
    }
  }

  .price-box {
    width: 100%;
    margin: 20px auto;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;

    .item {
      background: rgba(250, 120, 20, .5);
      border-radius: 10px;
      padding: 10px;
      color: #b21b1b;

      &:hover {
        background: rgba(250, 120, 20, .8);
      }
    }
  }
}

@media (max-width: 1100px) {
  .main-box {
    width: 100%;
  }

  .info-box {
    display: none;
  }
}
</style>